/*
Table of Contents:

	ELEMENTS
	PAGE BAR
		Panel Buttons
		Login Form
	PANELS
		Default Panel Sizes
		Panel Sections
		Panel Resize Handles
		Panel Titles
		Panel Tabs
		Panel Contents
		Links on Panels
		Forms on Panels
		Brushes
		Chat
		Piece and Tile Images
		Stats
	MAP
		Layers
		Pieces
	INSTALL BOX
	MISCELLANEOUS

*/

/* ELEMENTS */

body {
	margin: 0;
	padding: 0;
	background: #999;
	font-size: 14px;
	font-family: Arial,Helvetica,sans-serif;
	scrollbar-face-color:#8080FF;
	scrollbar-arrow-color:#FFFFFF;
	scrollbar-track-color:#DDDDFF;
	scrollbar-shadow-color:'';
	scrollbar-highlight-color:'';
	scrollbar-3dlight-color:'';
	scrollbar-darkshadow-Color:'';
}

input, select {
	margin: 0;
	padding: 0;
	border: 1px solid #CCC;
/*	float: left; */
}

input[type=text] {width: 5em;}
input[type=text][size='1'] {width: 0.7em; text-align: right;}
input[type=text][size='2'] {width: 1.4em; text-align: right;}
input[type=text][size='3'] {width: 2.1em; text-align: right;}
input[type=text][size='4'] {width: 2.8em; text-align: right;}

table {border-collapse: collapse;}
th, td {padding: 0;}

/* PAGE BAR */

#pageBar {
	background: black url(images/pageBar.jpg) repeat-x left top;
	min-height: 26px;
	width: 100%;
	position: fixed;
	top: 0;
	overflow: auto;
}

#logo {
	background: url(images/logo.png) no-repeat;
	width: 170px;
	height: 33px;
	position: fixed;
	left: 10px;
	top: 0;
}

/* Panel Buttons: these buttons show and hide panels */

#panelButtons {
	margin-left: 155px;
	position: relative;
}

.panelButton {
	height: 22px;
	float: left;
	margin: 0 0 0 12px;
	color: #CCC;
	font-size: 16px;
	padding: 3px 1px 0 2px;
}

.panelButton:hover {
	cursor: pointer;
	color: #EEE;
}

.panelButton::before {
	display: block;
	content: url(images/buttonUncheck.png);
	width: 19px;
	height: 19px;
	float: left;
	margin-top: 1px;
}

.panelButton.checked::before {content: url(images/buttonCheck.png);}

/* View Controls */

#viewControls {
	margin: 2px 5px 2px 5px;
	float: right;
}

#viewControls input {
	height: 21px;
	width: 21px;
	background-color: #999;
}

/* Login Form */

#loginForm {
	float: right;
	margin: 2px 0 0 12px;
	color: #999;
	padding: 1px 1px 1px 1px;;
}

#loginForm input {
	background: #CCC;
	color: #333;
	margin-right: 4px;
}

#loginForm input[type=text] {
	border: 1px solid #CCC;
}

/* PANELS: moveable, resizeable windows overlaying the map */

/* main panel container */
.panel {
	position: fixed;
	display: none;
	z-index: 0;
}

/* Default Panel Sizes */

.panel[data-panel=user]      {left: 185px; top: 26px;  width: 210px; height: 180px;}
.panel[data-panel=table]     {left: 0;   top: 95px;  width: 355px; height: 210px;}
.panel[data-panel=map]       {left: 0;   top: 49px;  width: 140px; height: 260px;}
.panel[data-panel=character] {left: 0;   top: 72px;  width: 175px; height: 380px;}


/* Panel Resize Handles */

.resizeTL, .resizeTR, .resizeBL, .resizeBR {position: absolute;}
.resizeTL {
	background: url(images/resizeTL.png);
	width: 15px;
	height: 23px;
	left: -5px;
	top: 0;
	cursor: nw-resize;
}
.resizeTR {
	background: url(images/resizeTR.png);
	width: 10px;
	height: 23px;
	right: -5px;
	top: 0;
	cursor: ne-resize;
}
.resizeBL {
	background: url(images/resizeBL.png);
	height: 13px;
	width: 13px;
	left: -5px;
	bottom: -1px;
	cursor: sw-resize;
}
.resizeBR {
	background: url(images/resizeBR.png);
	height: 13px;
	width: 13px;
	right: -5px;
	bottom: -1px;
	cursor: se-resize;
}

/* Panel Titles */

.title {
	cursor: pointer;
	position: relative; /* contains absolute positioned .resizeTL/TR and .close */
	background: url(images/panelBar.jpg) repeat-x top left;
	height: 23px;
	margin: 0 5px;
}
.title .caption {
	background: url(images/titleBG.jpg) repeat-x top left;
	height: 21px;
	float: left; /* remove, change padding to margin: 2px auto 0 0; ? */
	color: #333;
	font-size: 16px;
	text-decoration: none;
	padding: 2px 2px 0 10px;
}
.title .caption::after {
	content: url(images/titleEnd.jpg);
	width: 5px;
	height: 23px;
	margin: -2px -7px 0 0;
	float: right;
}
.close {
	background-image: url(images/close.png);
	position: absolute;
	width: 22px;
	height: 23px;
	right: 5px;
	top: 0;
	cursor: pointer;
}
.close:hover {background-image: url(images/closeHover.png);}

/* Panel Tabs */

.tabBar {
	background: url(images/tabBar.jpg) repeat top left;
	min-height: 1px;
/*	max-height: 42px; */
/*	clear: both; */
	border-left: 1px solid #333;
	border-right: 1px solid #333;
	overflow: auto;
}
/* annoying hack to avoid scrollbars in .tabBar */
.tabBar::after {
	clear: both;
	content: '';
	height: 3px;
	float: left;
	background: white;
	width: 100%;
}

.tab {
	float: left;
	height: 19px;
	margin: 0 0 0 1px;
	padding: 2px 5px 0 5px;
	color: #333;
	font-size: 13px;
	background: url(images/inactiveTabBG.jpg) repeat-x top left;
}
.tab:hover {
	text-decoration: underline;
	cursor: pointer;
}
.tab.active {background-image: url(images/activeTabBG.jpg);}
.tab::before {
	float: left;
	width: 2px;
	height: 21px;
	margin: -2px 0 0 -5px;
	content: url(images/inactiveTabStart.jpg);
}
.tab.active::before {content: url(images/activeTabStart.jpg);}
.tab::after {
	float: right;
	width: 2px;
	height: 21px;
	margin: -2px -5px 0 0 ;
	content: url(images/inactiveTabEnd.jpg);
}
.tab.active::after {content: url(images/activeTabEnd.jpg);}


/* Panel Sections */

.panel .content {
	background: #FFF;
	border-left: 1px solid #333;
	border-right: 1px solid #333;
	color: #333;
	overflow: auto;
/*	padding: 0 5px; */
}

.panel .bottom {
	background: #FFF;
	margin: 0 5px;
	height: 12px;
	border-bottom: 1px solid #333;
	position: relative; /* contains absolute positioned .resizeBL/BR */
}

/* Forms on Panels */

.panel .content a {cursor: pointer; text-decoration: none;}
.panel .content a:hover {text-decoration: underline;}

.panel .content input, .panel .content select {
	background: #FFF;
	color: #333;
}
.panel .content select {
	margin-top: -1px;
	background: #FFF;
}

.panel .content div {
	float: left;
	margin: 1px 5px 0 5px;
	min-height: 19px;
}

.panel .content[data-tab='piece list'] img {
	max-height: 19px;
	vertical-align: middle;
}

.buttonDiv {
	float: left;
	background: #333;
	border: 1px solid #000;
	color: #CCC;
	min-width: 10px;
	text-align: center;
}
.buttonDiv:hover {
	cursor: pointer;
}

/* Brushes: map painting tools (tables panel?) */
#eraser, #fogTool, #wallTool, #pieceTool {
	float: left;
/* handled by swatch class now
	border: 1px solid black;
	margin: 1px 1px 1px 1px;
*/
	height: 30px;
	width: 40px;
	text-align: center;
}

/* Chat */

#chatInput {border: 1px solid #CCC;}
.alert {color: #039;}
.roll {font-style: italic; color: #900;}

/* Color Palette */
.colorPalette {
	clear: left,
	position: relative,
	border: 2px solid transparent,
}
.colorSwatch {position: absolute;}
.colorSwatch.selected {
	border: 1px solid black;
	margin: -1px;
	z-index: 1;
}

/* Piece and Tile Images */
.swatch {
	border: 1px solid black;
	margin: 1px 1px 1px 1px;
	max-width: 50px;
}
.swatch.selected {border: 1px solid #F00;}
#pieceCreatorImages img, #pieceEditorImages img {max-width: 200px;}
#pieceCreatorImages, #pieceEditorImages {
	clear: both;
	overflow: none;
}

/* Stats */
.statRow {clear: both;}
.statName {float: left;}

/* MAP */

#map {
	position: relative;
	margin: 200px 200px 200px 200px;
}

/* Layers */

.clickLayer {
	position: absolute;
	top: 0;
	left: 0;
}
.clickLayer > div {position: absolute;}

#fogLayer > img {position: absolute;}

.grid {
	position: absolute;
	left: 0;
	top: 0;
}

/* Pieces */

.piece {position: absolute;}
.piece.selected {background: #FFF}
.pieceMover {
	position: absolute;
	border: 1px dashed transparent;
	opacity: 0.8;
}
.pieceMover.selected {border: black;}

/* INSTALL BOX */

#installBox {
	margin: 0 auto;
	width: 300px;
	display: none;
	text-align: center;
}
#installBox p {
	margin: 10px 0;
	text-align: justify;
}
#installBox table {
	border-collapse: collapse;
	margin: 10px auto;
	text-align: left;
}
#installBox td:first {padding-right: 0.5em;}
#installBox td:last-child {text-align: right;}
#installBox input {border: 1px solid #CCC;}

/* MISCELLANEOUS */

.deleteButton {float: right;}
.clearBoth {
	height: 0;
	width: 1px;
	margin-top: -1px;
	clear: both;
}
.separator {
	height: 1px;
	width: auto;
	margin: 1px 0 4px 0;
	clear: both;
	background: #999;
}

